// @ts-ignore
import { PageContainer } from '@ant-design/pro-components';
// @ts-ignore
import {Button, Card, Divider, Image, Input, Tag} from 'antd';
const { Search } = Input;
// @ts-ignore
import {React, useState, useEffect, useCallback} from 'react';
import {useModel} from "umi";
// @ts-ignore
import type {SearchProps} from "antd/es/input/Search";
import { history } from '@umijs/max'
import {getCurrentUserById, getInformationById, Recommend} from "@/services/ant-design-pro/api";
import './Welcome.less'


const onSearch: SearchProps['onSearch'] = (value) => {
  history.push(`/book/search/${value}`);
}

const Welcome: React.FC = () => {
   const [currentUser,setCurrentUser] = useState<API.CurrentUser>({})
   const {informationList,setInformationList} = useModel('informationModel');
   const [recommend, setRecommend] = useState<API.BookDetail>({})

  const getCurrentUser = async (userId: string) => {
    try {
      const res = await getCurrentUserById(userId);
      if (res.data) {
        setCurrentUser(res);
      }
    } catch (error) {
      console.log(error);
    }
  }
  useEffect(() => {
    if(localStorage.getItem("userId")){
      // @ts-ignore
      getCurrentUser(localStorage.getItem("userId")).then()
    }
  },[])

  const getRecommend = async (userId: number) => {
    try {
      const res = await Recommend(userId);
      if (res.data) {
        setRecommend(res);
      }
    } catch (error) {
      console.log(error);
    }
  };
  useEffect(() => {
    if(currentUser.data){
      getRecommend(currentUser.data.id).then();
    }
  }, [currentUser]);
  const book = recommend.data

  const getInformation = async (userId: number) => {
    try {
      const res = await getInformationById(userId);
      if (res.data) {
        setInformationList(res);
      }
    } catch (error) {
      console.log(error);
    }
  };
  useEffect(() => {
    if(currentUser.data){
      getInformation(currentUser.data.id).then();
    }
  })

  const clickForDetail = useCallback((id: number) => {
    history.push(`/book/detail/${id}`);
  }, [])

  return (
    <PageContainer>
      <Image
        src={"https://xiaoxiaobaiyang.oss-cn-shenzhen.aliyuncs.com/mylibrary/web-image/banner1.jpg" }
        style={{
          width: "100%",
          marginBottom: "20px",
        }}
      ></Image>
      <Card
        className={"userInfo"}
        style={{
          float: "right",
          width: "20%",
          height: "400px",
        }}
      >
        <Image
          src={'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg' }
          style={{
            width: "82px",
            height: "82px",
            margin: "auto",
            cursor: "pointer",
            marginLeft: "20px"
          }}
        ></Image>

        {currentUser.data && (<div>
          <p className="user-name">{currentUser.data.username}</p>
          <p className="user-name">{currentUser.data.id}</p>
        </div>
        )}



        <p className="user-handle">
          <a href="/userInfo" className="module_link"
             target="_blank" rel="noreferrer">个人信息</a>
          <span>|</span>
          <a href="#" className="module_link">退出登录</a>
        </p>
        <Button type={"primary"} onClick={
          () => {
            history.push("/user/login")
          }
        }> 用户登录 </Button>
        <Button type={"primary"} ghost> 用户注册 </Button>
        <Button type={"primary"} ghost> 退出登录 </Button>
      </Card>

      <Card
        className={"mainBox"}
        style={{
          float: "left",
          width: "79%",
          marginBottom: "20px",
        }}
      >
        <div style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          overflow: "hidden",
          width: "100%",
          height: "150px"
        }}>
          <Image
            src={"https://xiaoxiaobaiyang.oss-cn-shenzhen.aliyuncs.com/mylibrary/web-image/logo1.png"}
            style={{
              width: "300px",
              height: "300px",
              margin: "auto",
              cursor: "pointer",
              marginLeft: "20px"
            }}
          ></Image>
        </div>

        <Search
          placeholder="input search text"
          allowClear
          enterButton
          size="large"
          onSearch={onSearch}
        />

        <Card
          title={"今日推荐"}
          className={"personal"}
        >
          {book && (
            <div
              style={{
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              <div
                style={{
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                  width: "100%"
                }}
              >
                <Image
                  src={book.picture}
                  style={{
                    float: "right",
                    height: "200px"
                  }}
                ></Image>
              </div>

              <div
                style={{
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "center",
                  alignItems: "center",
                  width: "100%"
                }}
              >
                <h2>{book.name}</h2>
                <div>
                  <Tag color="magenta">编号：{book.id}</Tag>
                  <Tag color="green">分类：{book.sort}</Tag>
                  <Tag color="gold">智库评分：{book.score}</Tag>
                </div>
                <h3>作者：{book.author}</h3>
                <Button style={{ width:"80%" }} type={"primary"} className={"myButton"} onClick={() => clickForDetail(book.id)}>查看详情</Button> <br/>
              </div>
            </div>

          )}

        </Card>

        <Card
          className={"messageBox"}
          title={"我的通知"}
        >
        <ul>
          {informationList.data &&
            informationList.data.map((information,index)=>(
               <li key={index}>
                 <div className={"informationBox"}>
                   <p className={"sort"}>{information.sort}</p>
                   <Divider
                     style={{
                       margin: "10px",
                       width: "100%",
                     }}/>
                   <div
                     style={{
                       float: "left",
                       width: "70%",
                     }}
                   >
                     <p>{information.content}</p>
                   </div>
                   <div
                     style={{
                       float: "right",
                       width: "25%",
                       overflow: "hidden",
                     }}
                   >
                     <Button type={"primary"}>查看</Button>
                   </div>
                   <Tag color="orange" className={"time"}>{information.time}</Tag>
                 </div>

               </li>
            ))
          }
        </ul>

        </Card>
      </Card>


    </PageContainer>
  );
};

export default Welcome;
